<template lang="">
  <div class="content">
    <div class="main">
      <div class="search" style="border: 0px solid #000;height: 80px;padding-top: 20px;background-color: #fff;">
        <div class="left" style="float: left;">
          <div class="top" style="border: 0px solid #000;margin-top: -15px;text-align: left;margin-bottom: 5px;">
            <el-select v-model="industry" placeholder="请选择行业" clearable v-on:change="getProcessList()">
              <el-option v-for="(item,index) in industryList" :key="index" :label="item.dictKey" :value="item.dictKey">
              </el-option>
            </el-select>
          </div>
          <div class="bottom" style="border: 0px solid #000;margin-left: 25px;">
            <div class="tit" style="border: 0px solid #000;text-align: left;">
              <span style="font-size: 16px;">项目阶段：</span>             
              <div class="jd" style="border: 0px solid #000;margin-left: 80px;margin-top: -20px;">
                <el-checkbox-group v-model="processList" @change="changeStatusInput()">
                  <el-checkbox v-for="item in processList" :key="item.salesProcessId" :label="item.salesProcessId">
                    {{item.processName}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>

          </div>
          <!-- <el-select v-model="salesProcessId" placeholder="请选择销售机会阶段" @input="changeStatusInput()" clearable @change="">
            <el-option v-for="item in processList" :key="item.salesProcessId" :label="item.processName"
              :value="item.salesProcessId"></el-option>
          </el-select> -->
        </div>
        <div class="right" style="float: right;">
          <el-input suffix-icon="el-icon-search" v-model="businessName" placeholder="请输入项目名称"
            @input="businessNameInput()"
            style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;position: relative;left: -120px;">
          </el-input>
          <el-button class="btn-upload" slot="trigger" size="small" type="primary" @click="Download"
            style="position: relative;left: 0px;top: -17px;">下载模板</el-button>
          <el-upload class="upload-demo" action="api/crm/sales/insertExcel" :on-success="handleVideoSuccess"
            :file-list="fileList" :show-file-list="false">
            <el-button class="btn-upload" slot="trigger" size="small" type="primary"
              style="position: relative;top: -55px;">导入文件</el-button>

          </el-upload>

        </div>
      </div>
      <div class="tabs">
        <el-table border ref="singleTable" highlight-current-row :data="changeList" tooltip-effect="dark"
          style="width: 100%;cursor: pointer;" @row-dblclick="handleSelectionChange">
          <el-table-column type="index" width="55">
          </el-table-column>
          <el-table-column prop="businessName" label="项目名称" width="400">
            <template slot-scope="scope">
              <span style="color:#fe0100;">
                {{ scope.row.businessName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="processName" label="项目阶段" width="120" align="center">
            <template slot-scope="scope">
              <span style="color: rgb(255, 136, 0);">
                {{scope.row.processName}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="expecteEarn" label="预期金额" width="160" align="right">
            <template slot-scope="scope">
              <span style="color: rgb(255, 136, 0);">
                <!-- ￥{{scope.row.expecteEarn}} -->
                {{ (parseFloat( scope.row.expecteEarn)).toLocaleString('zh-CN', { style: 'currency', currency:
                'cny', currencyDisplay: 'symbol' })}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="province" label="所属省份" width="100" align="center">
          </el-table-column>
          <el-table-column prop="city" label="所属县市" width="100" align="center">
          </el-table-column>
          <el-table-column prop="username" label="客户" width="320" align="center">
          </el-table-column>
          <el-table-column prop="realname" label="销售员" width="120" align="center">
          </el-table-column>
          <el-table-column prop="expecteEndTime" label="预计完成" :formatter="dateFormat" align="center">
          </el-table-column>
        </el-table>
        <el-pagination style="margin:20px;text-align: right;" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :page-size="size" :current-page="current" :page-sizes="[10, 20, 30]"
          :total="total" layout="sizes,prev, pager, next">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment';
  export default {
    // name: 'staff',
    inject: ['reload'],
    data() {
      return {
        current: 1,
        size: 20,
        total: 0,
        currentRow: null,
        changeList: [], //销售机会列表
        processList: [],   //销售过程列表
        industryList: [],   //行业列表

        industry: '水利',
        dictKey: '',
        businessName: '',
        salesProcessId: '',
        processName: '',
        fileList: [],
        // expecteEarn:''
      }
    },
    mounted() {
      this.getChangeList()
      this.getIndustryList()

    },
    methods: {
      handleVideoSuccess(res, file) { //获取上传图片地址
        this.fileFlag = false;
        this.fileUploadPercent = 0;
        console.log(file)
        if (res.code == 200) {
          this.$message.success('文件上传成功！');
        } else {
          this.$message.error('文件上传失败，请重新上传！');
        }
      },
      Download() {
        let link = document.createElement("a");
        link.target = "_blank"
        link.href = process.env.VUE_APP_SERVER_HOST + "/attach/template/BusinessOpportunityImportTemplate.xlsx";
        link.setAttribute("download", "");
        link.click();
      },
      // 金额格式化
      // amountFormat: function (row, column) {
      //   // debugger
      //   var expecteEarn = row[column.property];
      //   if (expecteEarn == null) {
      //     return (parseFloat(0)).toLocaleString('zh-CN', {
      //     style: 'currency', currency:
      //       'cny', currencyDisplay: 'symbol'
      //   });
      //   }
      //   return (parseFloat(expecteEarn)).toLocaleString('zh-CN', {
      //     style: 'currency', currency:
      //       'cny', currencyDisplay: 'symbol'
      //   });
      // },
      //时间格式化
      dateFormat: function (row, column) {
        // debugger
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY/MM/DD");
      },
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleSizeChange(val) {
        this.size = val
        this.getChangeList()
      },
      handleCurrentChange(val) {
        this.current = val
        this.getChangeList()
      },
      //行业
      async getIndustryList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: current,
          size: size,
          dictVar: 'industry'
        }
        let result = await this.$API.dict.reqDictList(data)
        this.total = result.data.total;
        this.industryList = result.data.data
        this.getProcessList()

      },
      // 销售阶段
      async getProcessList() {
        // 解构出参数
        const { current, size, industry } = this;
        var data = {
          current: current,
          size: size,
          industry: industry
        }
        // alert(industry)
        var result = await this.$API.change.reqSellList(data)
        this.processList = result.data.data
      },
      // 搜索
      changeStatusInput() {
        this.getChangeList()
      },
      businessNameInput() {
        this.getChangeList()
      },


      // 获取销售机会列表
      async getChangeList() {
        // 解构出参数
        const { current, size, businessName, salesProcessId } = this;
        var data = {
          current: current,
          size: size,
        }
        if (businessName != '') {
          data.businessName = businessName
        } else if (salesProcessId != '') {
          data.salesProcessId = salesProcessId
        }
        let result = await this.$API.change.reqChangeList(data)
        this.total = result.data.total;
        this.changeList = result.data.data

      },
      handleSelectionChange(val) {
        console.log(val)
        this.currentRow = val;
        this.$router.push({
          path: '/change/details',
          name: 'details',
          query: {
            salesId: this.currentRow.salesId,
          }
        });
      }
    }
  }

</script>
<style scoped>
  @import "../style/style.css";

  .main {
    border: 0px solid #000;
    border-radius: 10px;
    overflow: hidden;
  }

  .el-button {
    background-image: linear-gradient(to right, #0060ff, #0005cf);
    color: #fff;
    font-size: 16px;
    width: 90px;
    height: 39px;
    border-radius: 50px;
    text-align: center;
  }

  .search .left {
    padding-left: 20px;
  }

  .search .left>>>.el-select .el-input {
    background-color: #f5f5f7;
    width: 200px;
    margin-left: 20px;
    border-radius: 50px;
    overflow: hidden;
    height: 40px;
  }

  .search .left>>>.el-input__icon {
    color: #000;
    font-weight: 600;
  }

  .search .left>>>.el-select .el-input .el-select__caret {
    color: #000;
  }

  .search .right {
    padding-right: 40px;
  }

  .search>>>.el-input__inner {
    background-color: #f5f5f7;
  }
</style>